//导入函数
import { createRouter, createWebHistory } from 'vue-router'
import Home from "@/components/Home.vue";
import Main from "@/views/Main.vue";

let flag = true;
//创建Router的实例
const router = createRouter({
  //web史模式，还有一种是hash模式：#
  history: createWebHistory(import.meta.env.BASE_URL),
  //路由的配置：是一个json数组
  routes: [
      //首页的路由
    {
      path: '/', //路由的路径,必须是唯一的
      name: 'home',//一般小写
      component: ()=>import('@/components/Home.vue') //组件，立即加载
    },
    {
      path:'/news',
      name: 'news',
      //懒加载组件
      component: ()=>import('@/components/NewList.vue'),
      //二级路由：嵌套路由
      children: [
        {
          path:':id',// 不需要 '/'   /news/1001  :RESTFUL
          props: true,//解耦方式生效，使用props传参
          component:()=>import('@/components/Detail.vue')
        }
      ]
    },
      //主要演示命名路由
    {
      path:'/news3/:id',//注意占位符的位置
      name:'news3',//这是一个名字而已，不能用来传参
      props:true,
      component: ()=>import('@/components/Detail.vue')
    },
      //一级路由
    {
      path: '/news2',//必须唯一的
      name: 'news2',//必须唯一
      props: route=>({id: route.query.id}), //使用了id来获取路由中使用的问号传递的数据
      //懒加载组件
      component: () => import('@/components/Detail.vue')
    },
    {
      path:'/login',
      name:'login',
      component:()=>import('@/views/Login.vue')
    },
    {
      path:'/remark',
      name:'remark',
      component:()=>import('@/components/Remark.vue')
    }
  ],
})
//设置全局守卫
// to：去哪个组件
//from：从哪个组件来
router.beforeEach((to, from) => {
  console.log('从',from.path)
  console.log('到',to.path)
  console.log('--------------------')
  //从本地存储中获取用户的登录状态
  let loginStatus = localStorage.getItem('loginStatus');
  console.log('登录状态:',loginStatus)
  //判断是否处于登录状态
  if (to.path === '/remark' && loginStatus!=='1') {
      alert('要评论，先登录')
      flag=false;
      //return false;//不会跳转
      //直接跳转到登录
      return {name:'login'} //跳转页面：使用了命名路由
  }else{
    return true;//成功跳转
  }


})
//后置守卫：怎么知道路由成功没？
router.afterEach((to, from) => {
  console.log('后置：to:',to.path)
  console.log('后置：from:',from.path)
  if (!flag){
    alert('路由失败');
  }

})

//导出这个路由实例
export default router
